<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('')"/>
    <meta charset="UTF-8">
    <!-- import element-ui CSS -->
   <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!--<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=6adWMU9fECMDUxPZF1CPKcr35WLi5cMw"></script>-->
    <link rel="stylesheet" href="/ocean/css/head.css">
    <th:block th:include="include :: ele-vue" />
</head>
<style>
    .el-row {
        background-color: #1844a8!important;
    }
    .cdcss {
        background-color: #1844a8!important;
    }
</style>
<style type="text/css">
    .overflow{
        height: 400px;
        overflow-y: scroll;
    }
    .el-menu--horizontal>.el-menu-item {
        color: #c9c3c3!important;
    }
    .menu_cot2_ft {
        font-size: 16px;
    }
    .menu_cot1_ft {
        font-size: 16px;
    }
    .menu_cot3_ft {
        font-size: 16px;
    }
</style>
<body>
<!--编写标签-->
<div id="app">
    <el-row>
        <div class="logo"><img style="margin-left: 14%;" src="img/logo1.png"></div>
        <div v-show="loginis" id="loginis">
            <div style="float: right;margin-top: 20px; margin-right: 17px;color: #ffffff;width: 20%;font-size: 15px">
                <a @click="register" style="    font-size: 17px;color: #ffffff;    margin-left: 70%;">注册</a> |
                <a @click="login()" style="font-size: 17px;color: #ffffff;">登录</a></div>
        </div>
        <div v-show="useris" id="useris">

            <div style="float: right;margin-top: 20px; margin-right: 17px;color: #ffffff;width: 20%;font-size: 17px"><a style="color: #ffffee;font-size: 17px" @click="tiaozhuan()">管理端首页 &nbsp;&nbsp;&nbsp;&nbsp;  </a> 欢迎您，{{userinfo}}  <a @click="updatauser" style="color:#ffffff;font-size: 17px">修改个人信息</a>  <a @click="usergoout()"style="color: #ffffff;font-size: 17px">退出</a></div>
        </div>
        <div style="margin-top: 2%;">
            <el-menu :default-active="activeIndex" class="el-menu-demo cdcss" mode="horizontal" >
                <el-menu-item class="ztys" style="font-weight: bold; color: #ffffff; font-size: 17px;" index="1" @click="handleMenuItemClick(home)">首页</el-menu-item>
                <el-menu-item class="ztys" style="font-weight: bold; color: #ffffff; font-size: 17px;" index="2" @click="handleMenuItemClick(synopsis)">平台简介</el-menu-item>
                <el-menu-item index="3"  @click.native="login()" class="menu_p" >
                    <template slot="title" ><p style="font-weight: bold; color: #ffffff; font-size: 17px;">产品浏览</p></template>
<!--
                    <el-submenu v-for="v in productbrowsing1" :index="v.type+'1'" class="loginbefore" id="loginbefore">
                        <template slot="title">
                            <span>{{v.type}}</span>
                        </template>
                        <el-menu-item-group class="loginbefore">
                            <el-menu-item v-for="name1 in v.name" :index="name1.pname+'1'" class="loginbefore">
                                <template slot="title">
                                    <span>{{name1.pname}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu v-for="v in productbrowsing" :index="v.type" id="loginafter" class="loginafter" style="display: none">
                        <template slot="title">
                            <span>{{v.type}}</span>
                        </template>
                        <el-menu-item-group class="loginafter">
                            <el-submenu v-for="name in v.name" :index="name.pname" class="loginafter">
                                <template slot="title">
                                    <span>{{name.pname}}</span>
                                </template>
                                <el-menu-item-group v-if="name.children != null" class="loginafter overflow" >
                                    <el-menu-item v-for="list in name.children" :index="list" :key="list" v-if="list != null">
                                        <span @click="loadhref($event)">{{list}}</span>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu-item-group>
                    </el-submenu>
-->
                </el-menu-item>
                <el-menu-item class="ztys" style="font-weight: bold; color: #ffffff; font-size: 17px;" index="4" @click="znwgjkff()">智能网格监控</el-menu-item>
                <el-menu-item class="ztys" style="font-weight: bold; color: #ffffff; font-size: 17px;" index="6" @click="handleMenuItemClick(statistics)">产品统计</el-menu-item>
                <el-submenu index="5">
                    <template slot="title"><a style="font-weight: bold; color: #ffffff; font-size: large;">平台信息</a></template>
                    <el-menu-item class="ztys" style="font-size: 17px;" index="5-1" @click="handleMenuItemClick(notice)">平台公告</el-menu-item>
                    <el-menu-item class="ztys" style="font-size: 17px;" index="5-2" @click="handleMenuItemClick(contact)">联系我们</el-menu-item>
                    <el-menu-item class="ztys" style=" font-size: 17px;" index="5-3" @click="handleMenuItemClick(problem)">常见问题</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="line"></div>
    </el-row>
    <div id="test"></div>
    <el-dialog
            :close-on-click-modal ="false"
            title="注册"
            :visible.sync="centerDialogVisible"
            width="60%"
            center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
                <el-form-item label="联系人:" prop="lxr">
                    <el-input v-model="ruleForm.lxr" id=""></el-input>
                </el-form-item>
                <el-form-item label="身份证号:" prop="sfzh">
                    <el-input v-model="ruleForm.sfzh" id=""></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="电话/手机:" prop="dh">
                    <el-input v-model="ruleForm.dh" id=""></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="yx">
                    <el-input v-model="ruleForm.yx" id=""></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="申请单位:" prop="sqdw">
                    <el-input v-model="ruleForm.sqdw" id=""></el-input>
                </el-form-item>
                <el-form-item label="单位性质:" prop="dwxz">
                    <el-input v-model="ruleForm.dwxz" id=""></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="单位通信地址:" prop="txdz">
                    <el-input v-model="ruleForm.txdz"></el-input>
                </el-form-item>
                <el-form-item label="单位证件类型:" prop="zjlx">
                    <el-input v-model="ruleForm.zjlx"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="单位证件号码:" prop="zjhm">
                    <el-input v-model="ruleForm.zjhm"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码:" prop="yzbm">
                    <el-input v-model="ruleForm.yzbm"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计划下载产品:" prop="xzcp">
                    <el-input v-model="ruleForm.xzcp"></el-input>
                </el-form-item>
                <el-form-item label="产品用途:" prop="cpyt">
                    <el-input v-model="ruleForm.cpyt"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="registertj('ruleForm')">注 册</el-button>
        </span>
    </el-dialog>
    <el-dialog
            :close-on-click-modal ="false"
            title="修改个人信息"
            :visible.sync="updatauserVisible"
            width="30%"
            center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="登录名:" prop="yhm">
                    <el-input v-model="userForm.yhm" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="手机:" prop="sj">
                    <el-input v-model="userForm.sj"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="yx">
                    <el-input v-model="userForm.yx"></el-input>
                </el-form-item>
        </el-form>
        <el-button @click="updatauserVisible = false">取 消</el-button>
        <el-button type="primary" @click="userupdata">修 改</el-button>
        </span>
    </el-dialog>
</div>
<div class="menu_box menu_p" style="z-index: 99999999;display: none;background-color: #1844a8">
    <div class="menu_cot1 left" style="background-color: #1844a8">
        <div class="menu_cot1_ft" id="N" style=" color: deepskyblue;background-color: #1844a8">数值预报产品</div>
        <div class="menu_cot1_ft" style="color: aliceblue;background-color: #1844a8" id="A">综合预报产品</div>
        <div class="menu_cot1_ft" style="color: aliceblue;background-color: #1844a8" id="R">分析类产品</div>
        <!--                            <div class="menu_cot1_ft" id="D">观测类产品</div>-->
    </div>
    <div class="menu_cot2 left" style="color: aliceblue;background-color: #1844a8"></div>
    <div class="menu_cot3 left cot3_1" style="color: aliceblue;background-color: #1844a8"></div>
    <div class="menu_cot3 left cot3_2" style="color: aliceblue;background-color: #1844a8"></div>
    <div class="menu_cot3 left cot3_3" style="color: aliceblue;background-color: #1844a8"></div>
</div>
</body>

<th:block th:include="include :: footer"/>

<script>
    // 创建vue
    var app = new Vue({
        // 控制的标签容器
        el: '#app',
        // 交互的数据
        data() {
            return {
                activeIndex: '1',
                home: '/home/tohome', //首页
                synopsis: '/home/synopsis',//平台简介
                notice: '/home/notice', //平台公告
                znwgjk: '/product/nctj', //智能网格监控
                contact: '/home/contact', //联系我们
                productbrowsing: {},
                problem: '/home/problem', //常见问题
                statistics: '/home/statistics',//统计
                productbrowsing1: {},
                userinfo: {},
                useris: false, //是否用户显示
                loginis: true, //是否登录显示
                centerDialogVisible: false, //显示隐藏注册窗口
                updatauserVisible: false, //显示隐藏修改个人信息窗口
                ruleForm: {
                    lxr: '',
                    sfzh: '',
                    dh: '',
                    yx: '',
                    sqdw: '',
                    dwxz: '',
                    txdz: '',
                    zjlx: '',
                    zjhm: '',
                    yzbm: '',
                    xzcp: '',
                    cpyt: ''
                },
                rules: {
                    lxr: [
                        { required: true, message: '请输入联系人', trigger: 'blur' },
                        { pattern:/^[\u4e00-\u9fa5]{2,4}$/, message: '联系人请输入2到4个汉字', trigger: 'blur' }
                    ],
                    sfzh: [
                        { required: true, message: '请输入身份证号', trigger: 'blur' },
                        // { message: '您输入的身份证号码不是有效格式', trigger: 'blur', pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ }
                    ],
                    dh: [
                        { required: true, message: '请输入电话/手机', trigger: 'blur' },
                        { message: '电话/手机号为8-12位数字', trigger: 'blur', pattern:/^[-+]?\d*$/, min:8, max:12 }
                    ],
                    yx: [
                        { required: false, message: '请输入Email', trigger: 'blur' },
                        { message: 'Email格式不正确', trigger: 'blur', pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ }
                    ],
                    sqdw: [
                        { required: true, message: '请输入申请单位', trigger: 'blur' },
                    ],
                    dwxz: [
                        { required: true, message: '请输入单位性质', trigger: 'blur' },
                    ],
                    txdz: [
                        { required: true, message: '请输入单位通信地址', trigger: 'blur' },
                    ],
                    zjlx: [
                        { required: true, message: '请输入单位证件类型', trigger: 'blur' },
                    ],
                    zjhm: [
                        { required: true, message: '请输入单位证件号码', trigger: 'blur' },
                    ],
                    yzbm: [
                        { required: true, message: '请输入邮政编码', trigger: 'blur' },
                        { message: '邮政编码为6位数字', trigger: 'blur', pattern:/^[-+]?\d*$/, len:6 },
                    ],
                    xzcp: [
                        { required: true, message: '请输入下载产品', trigger: 'blur' },
                    ],
                    cpyt: [
                        { required: true, message: '请输入产品用途', trigger: 'blur' },
                    ],
                },
                userForm: {
                    yhm:'',
                    sj:'',
                    yx:''
                }
            };
        },
        updated(){
            var userName = "[[${@permission.getPrincipalPropertyUnLogged('loginName')}]]";
            if (userName){
                $(".loginafter").show();$(".loginbefore").hide();
                // loadLoginHTML()
            }
        },
        mounted() {
            $(".menu_p").mouseover(function () {
                $(".menu_box").show();
            })
            $(".menu_p").mouseout(function () {
                $(".menu_box").hide();
            })
            var loginName = "[[${@permission.getPrincipalPropertyUnLogged('loginName')}]]";
            $('#test').load(this.home);
            var that_ = this
            $.ajax({
                url: "/home/productBrowsing/menu",
                type: 'get',
                success: function (res) {
                    that_.productbrowsing1 = res.data;
                    if (!loginName) {
                        that_.changemenucot2(that_.productbrowsing1)
                    }
                }
            })
            if (loginName){
                that_.userinfo = loginName
                that_.useris = true;
                that_.loginis = false;

                $.ajax({
                    url: "/home/productBrowsing/menuLoggedIn",
                    type: 'get',
                    success: function (res) {
                        app.productbrowsing = res.data;
                        //console.log('res.data-----------')
                       // console.log(res.data)
                        //console.log(app.productbrowsing)
                        app.changemenucot3(app.productbrowsing)
                    }
                })
            }

            /**
             * 产品浏览菜单点击事件
             */
            $(".menu_cot1_ft").click(function () {
                $(this).css("color", "deepskyblue").siblings().css("color", "#ffffff");
                //console.log("d")
                if (typeof app.userinfo === 'string') {
                    //console.log("登录")
                    that_.changemenucot3(that_.productbrowsing)
                }else {
                    //console.log("未登录")
                    $.modal.msgWarning("请先进行登录！");
                    that_.changemenucot2(that_.productbrowsing1)
                }
            });

            $(".menu_cot2_ft").click(function () {
               // console.log("d")
                $(this).css("color", "deepskyblue").siblings().css("color", "#ffffff");
                if (typeof app.userinfo === 'string') {
                    that_.changemenucot2click(that_.productbrowsing)
                }
            });

            /**
             * 挂载函数
             */
            window.clickevent=(event)=>{
                console.log("第一个")
                that_.clickevent(event)
            }
            window.load=(event)=>{
                console.log("第二个")
                that_.loadhref(event)
            }

/*
            $(".menu_cot3_ft").click(function () {
                $(this).css("color", "deepskyblue").siblings().css("color", "");
                var pname = $(".menu_cot3_ft[style*='color: deepskyblue']")[0];
                $("#test").load("/home/productBrowsing/detailByName?productName="+pname.innerText);
            });
*/
        },
        methods: {
            /**
             * 智能网格监控跳转
             */
            znwgjkff(){
                if (typeof app.userinfo === 'string') {
                    window.location.href = this.znwgjk
                }else {
                    //console.log("未登录")
                    $.modal.msgWarning("请先进行登录！");
                }

            },
            handleMenuItemClick(index) {
                $('#test').load(index);
            },
            tiaozhuan(){
                console.log("2222")
                if (typeof app.userinfo === 'string') {
                    //console.log("登录")
                    window.location.href ="/index"
                }else {
                    //console.log("未登录")
                   this.login();
                }
            },
            /**
             * 登录
             */
            login() {
                $.get("/home/productBrowsing/isLogin", function (res) {
                    //已登录
                    if (res.data) {
                        that_.userinfo = res.data.loginName
                        that_.useris = true;
                        that_.loginis = false;
                        $(".loginafter").show();$(".loginbefore").hide();
                        loadLoginHTML()
                        $("#glym").css("display","block")
                    } else {
                        //加载登录弹窗
                        top.layer.open({
                            type: 2,
                            area: ['500px', '400px'],
                            fix: false,
                            //不固定
                            maxmin: true,
                            shadeClose: false, // 设置为false点击遮罩层不关闭弹窗
                            shade: 0.3,
                            title: '登录',
                            content: '/home/productBrowsing/login',
                            // btn: ['确定', '关闭'],
                        })
                    }
                })
            },
            /**
             * 退出
             */
            usergoout(){
                that = this
                $.modal.confirm("确定要用户下线吗？", function() {
                    $.post('/home/goout',{},function (data) {
                        if (data.data === 200) {
                            that.$message({
                                message: '退出成功',
                                type: 'success'
                            });
                            that.useris = false;
                            that.loginis = true;
                            that.changemenucot2(that.productbrowsing1)
                        }
                    })
                })
            },
            /**
             * 注册
             */
            register() {
                this.$message('注册功能已关闭');
                //this.centerDialogVisible = true;
            },
            /**
             * 提交注册
             * @param done
             */
            registertj(formName) {
                this.$confirm('确认注册？')
                    .then(_ => {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                var _this = this;
                                var data = this.$refs[formName]._props.model
                                $.post("/register",data,function (result) {
                                    if (result.code === 0) {
                                        _this.$message({
                                            message: '注册成功',
                                            type: 'success'
                                        });
                                        window.location.href = "downOceanRegister?fileName="+result.msg
                                        _this.centerDialogVisible = false;
                                    }else {
                                        _this.$message({
                                            message: result.msg,
                                            type: 'error'
                                        });
                                        return false;
                                    }
                                })
                            } else {
                                this.$message({
                                    message: '注册失败',
                                    type: 'error'
                                });
                                return false;
                            }
                        });
                    })
                    .catch(_ => {
                    });
            },
            /**
             * 修改个人信息
             */
            updatauser(){
                var that = this;
                $.post('/home/getuser',{loginname:this.userinfo},function (data) {
                    //console.log(data)
                    if(data.data!=null){
                        that.userForm.yhm = data.data.loginName
                        that.userForm.sj = data.data.phonenumber
                        that.userForm.yx = data.data.email
                        that.updatauserVisible = true;
                    }
                })
            },
            /**
             * 提交修改个人信息
             */
            userupdata(){
                this.$confirm('确认修改？')
                    .then(_ => {
                        var that = this
                        $.post('/home/upuser',{loginName:this.userForm.yhm,phonenumber:this.userForm.sj,email:this.userForm.yx},function (data) {
                          //  console.log(data)
                            if(data.data!=0){
                                that.updatauserVisible = false;
                                that.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            }
                        })
                    })
                    .catch(_ => {
                    });
            },

            loadhref:function (event){
                console.log("跳转")
                if(event.innerText == "智能网格指导产品"){
                    $("#test").load("/home/productBrowsing/ltype");//如果是智能网格指导产品，则跳转到智能网格指导产品
                }else{
                    $("#test").load("/home/productBrowsing/detailByName?productName="+event.innerText);
                }
            },
            /**
             * 产品浏览二级菜单
             */
            changemenucot2(data){
                console.log("二级菜单")
                var departHtml='';
                var html1 = "";
                var html3 = "";
                var html2 = "";
                var menu = $(".menu_cot1_ft[style*='color: deepskyblue']")[0];
                //if(!isNaN(menu)) {
                    $.each(data[menu.innerText], function (index, t) {
                        //if (index == 0) {
                            //departHtml = "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>" + departHtml;
                        //} else {
                           // departHtml = "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>" + departHtml;
                        //}
                        if (t === '国家海洋环境预报中心') {
                            html1 = "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>";
                        }else if(t == "NCEP"){
                            html3 = "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>"
                        }else if(t == "中国气象局"){
                            html2 = "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>"
                        }else{
                            departHtml += "<div class='menu_cot2_ft' style='color: #ffffff'>" + t + " </div>";
                        }
                    })
                if(html1 != ""){
                    departHtml = html1+departHtml;
                    //departHtml += html1
                }
                if(html2 != ""){
                    departHtml += html2
                }
                if(html3 != ""){
                    departHtml += html3
                }

               // }
                $(".menu_cot2").html(departHtml);
                $(".cot3_1").html("");
                $(".cot3_2").html("");
                $(".cot3_3").html("");
            },
            clickevent:function (event){
                $(event).css("color", "deepskyblue").siblings().css("color", "");
                // if (loginName) {
                    this.changemenucot2click(this.productbrowsing)
                // }
            },
            changemenucot2click(data){
                console.log("二级菜单点击")
                var productHtml_1 = "";
                var productHtml_2 = "";
                var productHtml_3 = "";
                var menu1 = $(".menu_cot1_ft[style*='color: deepskyblue']")[0];
                var menu2 = $(".menu_cot2_ft[style*='color: deepskyblue']")[0];
                $.each(data[menu1.innerText][menu2.innerText],function (index, value) {
                    if (index % 3 == 0){
                        productHtml_1 += "<div class='menu_cot3_ft' style='color: #fffffff' onclick='load(this)'>" + value + "</div>";
                    }else if (index % 3 == 1){
                        productHtml_2 += "<div class='menu_cot3_ft' style='color: #fffffff' onclick='load(this)'>" + value + "</div>";
                    }else if (index % 3 == 2){
                        productHtml_3 += "<div class='menu_cot3_ft' style='color: #fffffff' onclick='load(this)'>" + value + "</div>";
                    }
                })
                if(menu1.innerText == "数值预报产品" && menu2.innerText == "国家海洋环境预报中心"){
                    productHtml_3 += "<div class='menu_cot3_ft' style='color: #fffffff' onclick='load(this)'>智能网格指导产品</div>";
                }
                $(".cot3_1").html(productHtml_1);
                $(".cot3_2").html(productHtml_2);
                $(".cot3_3").html(productHtml_3);
            },
            /**
             * 产品浏览三级菜单
             */
            changemenucot3(data) {
                console.log("sssssss")
                var departHtml = "";
                var productHtml_1 = "";
                var productHtml_2 = "";
                var productHtml_3 = "";
                //加载二级
                var menu1 = $(".menu_cot1_ft[style*='color: deepskyblue']")[0];
                var menu2 = $(".menu_cot2_ft[style*='color: deepskyblue']")[0];
                var count2 = 0;
                var html1 = "";
                var html3 = "";
                var html2 = "";
                // if(!isNaN(menu1)){
                $.each(data[menu1.innerText],function (key,value) {
                    if (count2 == 2) {
                        departHtml += "<div class='menu_cot2_ft' style='color: deepskyblue' onclick='clickevent(this)'>"+key+" </div>";
                        //加载三级
                        $.each(value,function(index,v){
                            if (index % 3 == 0){
                                productHtml_1 += "<div class='menu_cot3_ft' onclick='load(this)'>" + v + "</div>";
                            }else if (index % 3 == 1){
                                productHtml_2 += "<div class='menu_cot3_ft' onclick='load(this)'>" + v + "</div>";
                            }else if (index % 3 == 2){
                                productHtml_3 += "<div class='menu_cot3_ft' onclick='load(this)'>" + v + "</div>";
                            }
                        })
                        if(menu1.innerText == "数值预报产品"){
                            productHtml_3 += "<div class='menu_cot3_ft' style='color: #fffffff' onclick='load(this)'>智能网格指导产品</div>";
                        }
                    } else {
                        /* if (key === '国家海洋环境预报中心') {

                             html1 = "<div class='menu_cot2_ft' onclick='clickevent(this)'>" + key + " </div>" + departHtml;

                         }else {*/
                        if (key === '国家海洋环境预报中心') {
                            html1 = "<div class='menu_cot2_ft' onclick='clickevent(this)'>" + key + " </div>";
                        }else if(key == "NCEP"){
                            html3 = "<div class='menu_cot2_ft' onclick='clickevent(this)'>" + key + " </div>"
                        }else if(key == "中国气象局"){
                            html2 = "<div class='menu_cot2_ft' onclick='clickevent(this)'>" + key + " </div>"
                        }else{
                            departHtml += "<div class='menu_cot2_ft' onclick='clickevent(this)'>" + key + " </div>";
                        }

                    }
                    // }
                    count2++;
                })
                if(html1 != ""){
                    departHtml = html1+departHtml;
                }
                if(html2 != ""){
                    departHtml += html2
                }
                if(html3 != ""){
                    departHtml += html3
                }
                //departHtml += departHtml;



                //}
                $(".menu_cot2").html(departHtml);
                // $(".menu_cot2_ft:first").css("color", "deepskyblue");
                //加载三级
                $(".cot3_1").html(productHtml_1);
                $(".cot3_2").html(productHtml_2);
                $(".cot3_3").html(productHtml_3);
            }
        }
    })

    function loadLoginHTML() {
        $("#test").load("/home/productBrowsing/browseHP")
        app.changemenucot3(app.productbrowsing)
        // $(".loginafter").show();$(".loginbefore").hide();

    }

    function loadLogin(username) {
        app.userinfo = username
        app.useris = true;
        app.loginis = false;
        app.$message({
            message: '登录成功',
            type: 'success'
        });
        // app.changemenucot3(app.productbrowsing)
        //加载登录后产品浏览悬浮菜单
        $.ajax({
            url: "/home/productBrowsing/menuLoggedIn",
            type: 'get',
            success: function (res) {
                app.productbrowsing = res.data;
               // console.log('res.data-----------')
               // console.log(res.data)
                //console.log(app.productbrowsing)
                app.changemenucot3(app.productbrowsing)
            }
        })

        // $(".loginafter").show();$(".loginbefore").hide();
        // $("#test").load("/home/productBrowsing/browseHP")
    }

    //注册
    function register(){
        var contacts = $("#contacts").val().trim();	//联系人
        var idNumber = $("#idNumber").val().trim();	//身份证号
        var telephoneNumber = $("#telephoneNumber").val().trim();	//电话号码
        var email = $("#email").val().trim();	//Email
        var depart = $("#department").val().trim();	//单位
        var unitProperty = $("#unitProperty").val().trim();	//单位性质
        var unitAddress = $("#unitAddress").val().trim();	//单位通信地址
        var unitDocumentType = $("#unitDocumentType").val().trim();	//单位证件类型
        var unitIdentificationNumber = $("#unitIdentificationNumber").val().trim();	//单位证件号码
        var postalCode = $("#postalCode").val().trim();	//邮政编码
        var downloadProducts = $("#downloadProducts").val().trim();	//计划下载产品
        var productUse = $("#productUse").val().trim();	//产品用途
        if(contacts == ""){
            registerErroeMessage("请输入联系人");
            return;
        }
        if(!contacts.match(/^[\u4e00-\u9fa5]{2,4}$/)){
            registerErroeMessage("联系人请输入2到4个汉字");
            return;
        }
        if(idNumber == ""){
            registerErroeMessage("请输入身份证号");
            return;
        }
        if(!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idNumber))){
            registerErroeMessage("您输入的身份证号码不是有效格式");
            return;
        }
        if(telephoneNumber == ""){
            registerErroeMessage("请输入电话/手机");
            return;
        }
        if(!(/^[-+]?\d*$/.test(telephoneNumber))){
            registerErroeMessage("电话/手机号为8-12位数字");
            return;
        }
        if(telephoneNumber.length > 12 || telephoneNumber.length < 8){
            registerErroeMessage("电话/手机号为8-12位数字");
            return;
        }
        if(email == ""){
            registerErroeMessage("请输入Email");
            return;
        }
        if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email))){
            registerErroeMessage("Email格式不正确");
            return;
        }
        if(depart == ""){
            registerErroeMessage("请输入申请单位");
            return;
        }
        if(unitProperty == ""){
            registerErroeMessage("请输入单位性质");
            return;
        }
        if(unitAddress == ""){
            registerErroeMessage("请输入单位通信地址");
            return;
        }
        if(unitDocumentType == ""){
            registerErroeMessage("请输入单位证件类型");
            return;
        }
        if(unitIdentificationNumber == ""){
            registerErroeMessage("请输入单位证件号码");
            return;
        }
        if(postalCode == ""){
            registerErroeMessage("请输入邮政编码");
            return;
        }
        if(!(/^[-+]?\d*$/.test(postalCode))){
            registerErroeMessage("邮政编码为6位数字");
            return;
        }
        if(postalCode.length > 6 || postalCode.length < 6){
            registerErroeMessage("邮政编码为6位数字");
            return;
        }
        if(downloadProducts == ""){
            registerErroeMessage("请输入计划下载产品");
            return;
        }
        if(productUse == ""){
            registerErroeMessage("请输入产品用途");
            return;
        }
        closeErroeMessage();
        var data = {
            'contacts' : contacts,
            'idNumber' : idNumber,
            'telephone' : telephoneNumber,
            'email' : email,
            'depart' : depart,
            'unitProperty' : unitProperty,
            'unitAddress' : unitAddress,
            'cType' : unitDocumentType,
            'cNumber' : unitIdentificationNumber,
            'postalCode' : postalCode,
            'downloadProducts' : downloadProducts,
            'productUse' : productUse
        }
        $.ajax({
            type : "post",
            url : "register.do?register",
            dataType : "json",        //返回数据形式为json
            data : JSON.stringify(data),
            contentType : "application/json",
            success: function (result) {
                closeRegisterinDiv();
                cleanRegisterInput();
                window.location.href = ctx + "/register.do?downOcenaRegister&fileName=" + result;
            }
        });
    }
</script>
<style>
    .cdcss {
        float: inline-end;
        width: 45%;
        background-color: #ffffff;
    }

    .logo {
        position: absolute;
        margin-top: 2%;
        font-size: 30px;
        color: #f5f5f5;
        width: 36%;
    }

    .el-row {
        background-color: #ffffff;
    }

    .el-menu--horizontal > .el-menu-item.is-active {
        border-bottom: 2px solid blue !important;
    }
    .layui-layer-title{
        display: none!important;
    }
    .layui-layer-max {
        display: none!important;
    }
    .layui-layer-min{
        display: none!important;
    }
    .el-menu--horizontal>.el-menu-item {
        color: #ffffff!important;
    }
    .ztys:hover{
        color: #ffffff!important; /* 鼠标移入后的颜色 */
        background-color: #1844a8!important;
    }
    .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
        background-color: #1844a8!important;
    }
    .menu_p{
        background-color: #1844a8!important;
    }
    .menu_cot3_ft{
        color: aliceblue!important;
    }
    .menu_cot3_ft:hover {
        background-color: #0b88fd !important;
    }
</style>
</html>

